<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>补签列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../css/main.css">
	<style>
		.signIn-apply {
			width: 100vw;
			height: calc(100vh - 40px);
		}

		.signIn-apply a {
			text-decoration: none;
		}

		.info {
			width: 96%;
			margin: 10px 2%;
			padding: 0.5em 0;
			background-color: white;
			border-radius: 5px;
			position: relative;
		}

		.title {
			font-size: 14px;
			font-weight: bold;
			margin-left: 1em;
			width: 4em;
			display: inline-block;
		}

		.details {
			vertical-align: top;
			width: calc(100% - 5em);
			font-size: 15px;
			display: inline-block;
		}

		.result {
			height: 20px;
			float: right;
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 0.2em;
			top: 5px;
			right: 40px;
			color: crimson;
			padding: 0 calc((60px - 3em)/2) 0.1em calc((60px - 3em)/2 + 0.2em);
			border-radius: 5px;
			border-width: 2px;
			border-style: solid;
			position: absolute;
		}

		.result3 {
			height: 20px;
			float: right;
			font-size: 14px;
			top: 2px;
			right: 5px;
			color: #D3D3D3;
			position: absolute;
		}

		.normal {
			color: green;
		}

		.abnormal {
			color: #9A9A9A;
		}

		select {
			height: 35px;
			margin: 10px 2% 0 2%;
		}

		.handle {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
			background-color: rgba(62, 62, 62, 0.5);
			color: #000;
		}

		.handle-choose {
			width: 15em;
			margin-top: 65px;
			margin-left: calc((100% - 15em)/2);
			background-color: white;
			border-radius: 5px;
			text-align: center;
		}

		.handle-choose-title {
			font-size: 16px;
			padding: 0.5em 0;
			font-weight: bold;
			border-bottom: 1px solid #9A9A9A;
		}

		.handle-choose button {
			font-size: 14px;
			padding: 0.2em 0.6em;
			margin: 1.5em 1em;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">补签列表</div>
		<img src="../image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div class="signIn-apply" id="vue-root">
		<select v-model="status">
			<option :value="undefined">全部</option>
			<option :value="0">待审核</option>
			<option :value="1">已通过</option>
			<option :value="2">已驳回</option>
		</select>
		<div class="info" v-for="item in list" :key="item.id">
			<div class="result" v-if="item.status==0" @click="check(item)">审核</div>
			<div class="result normal" v-else-if="item.status==1">已通过</div>
			<div class="result abnormal" v-else-if="item.status==2">已驳回</div>

			<div class="result3" @click="del(item.id)">删除</div>
			<div class="title">姓名：</div>
			<div class="details" v-text="item.studentName"></div>
			<div class="title">班级：</div>
			<div class="details" v-text="item.classesName"></div>
			<!-- <div class="title">类别：</div>
			<div class="details" v-text="['普通考勤','校车','消课'][item.type]"></div> -->
			<div class="title">时间：</div>
			<div class="details" v-text="format(item.time)"></div>
			<div class="title" v-if="item.reason">事由：</div>
			<div class="details reason" v-if="item.reason" v-text="item.reason"></div>
		</div>

		<div class="handle" v-if="popup">
			<div class="handle-choose">
				<button @click="audit(true)">通过</button>
				<button @click="audit(false)">驳回</button>
				<button @click="popup=false">取消</button>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script>

		new Vue({
			el: '#vue-root',
			data: {
				status: null,
				list0: [],
				list: [],
				popup: false,
				item: null
			},
			created: function () {
				axios.get('/t/punch' + location.search).then(function (res) {
					this.list0 = res.data;
					this.status = 0;
				}.bind(this));
			},
			methods: {
				check: function (item) {
					this.item = item;
					this.popup = true;
				},
				audit: function (passed) {
					axios.put('/t/punch/' + this.item.id + '?passed=' + passed).then(function (res) {
						this.popup = false;
						this.item.status = passed ? 1 : 2;
					}.bind(this));
				},
				format: function (time) {
					return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
				},
				del: function (id) {
					if (!confirm('确认删除')) return;
					axios.delete('/t/punch/' + id).then(function (res) {
						alert('成功');
						location.reload();
					});
				}
			},
			watch: {
				status: function (newValue, oldValue) {
					if (newValue === null) {
						this.list = this.list0;
					} else {
						this.list = this.list0.filter(function (it) {
							return it.status == newValue;
						});
					}
				}
			}
		});

	</script>


</body>

</html>